<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core">

<f:view>
	<h:form id='form'>
		<h:head>
			<f:loadBundle basename="messages" var="msgs" />
			<title><h:outputText value="#{msgs.title}" /></title>

			<style type="text/css">
				@import "${facesContext.externalContext.requestContextPath}/views/css/theme.css";
				@import "${facesContext.externalContext.requestContextPath}/resources/css/tree/jquery.treeview.css";
				@import "${facesContext.externalContext.requestContextPath}/views/management/css/category_tree.css";
				@import "${facesContext.externalContext.requestContextPath}/resources/css/themes/base/jquery.ui.all.css";
				@import "${facesContext.externalContext.requestContextPath}/views/css/tabs.css";
				@import "${facesContext.externalContext.requestContextPath}/resources/css/header.css";
			</style>


			<script type="text/javascript"
				src="${facesContext.externalContext.requestContextPath}/resources/script/jquery.js"></script>

			<script type="text/javascript"
				src="../../resources/script/jquery.dataTables.js"></script>
			<script
				src="${facesContext.externalContext.requestContextPath}/resources/script/ui/jquery-ui-1.9.0.custom.js"></script>
				
			<script type="text/javascript"
				src="${facesContext.externalContext.requestContextPath}/resources/script/jquery.cookie.js"></script>
			<script type="text/javascript"
				src="${facesContext.externalContext.requestContextPath}/resources/script/tree/jquery.treeview.js"></script>
			<script type="text/javascript"
				src="${facesContext.externalContext.requestContextPath}/resources/script/tree/jquery.treeview.edit.js"></script>
			<script type="text/javascript"
				src="${facesContext.externalContext.requestContextPath}/views/management/scripts/categoriesTree.js"></script>
				
             
			<script type="text/javascript">
				$(function() {
					$("#browser").treeview();
					
					$( "#tabs" ).tabs({
						beforeLoad: function( event, ui ) {
							ui.jqXHR.error(function() {
								ui.panel.html(
									"Couldn't load this tab. We'll try to fix this as soon as possible. " +
									"If this wouldn't be a demo." );
							});
						},
					beforeActivate: function(event, ui)
					{
					}
					});
					
					$("#dialog-form").dialog({
						autoOpen : false,
						height :300,
						width : 500,
						modal : true,
						buttons : {
							"Submit": function() {
								
								$("[id='form:edit_description']").val($('[id="form:edit_category_description"]').val());
								$("[id='form:edit_parent']").val($('[id="form:edit_category_parent"]').val());
								$('[id="form:edit_link"]').click();
							},
							"Delete": function() {
								var name = $('[id="form:edit_category_description"]').val();
								var r = confirm("Are you sure to delete Category: "
										+ name + "?");
								if (r != true) {
									return false;
								} else {
									return true;
								}
								$('[id="form:delete_link"]').click();
							},
							Cancel : function() {
								$(this).dialog("close");
							}
							
						},
						close : function() {
						}
					});
					$('[id="form:add_category"]').click(function() {

					});

					$("span.folder").click(function() {
					});
					$("span.file").click(function() {
						$("#dialog-form").dialog("open");
						var value = $(this).text();
						$('[id="form:edit_category_name"]').val(value);

						$('[id="form:edit_name"]').val(value);
						$('[id="form:load_btn"]').click();
					});
					
					

				});

				
			</script>

		</h:head>
		<body>
			<ui:include src="../header/header.xhtml" />
			<br />
			<br />
			<br />
			
			<div id="tabs" >
				<ul>
					<li><a href="#category_tab">Categories</a></li>
					<li >
					 <a href="#new_tab">Create New Category</a>
					</li>
				</ul>
				<div id="category_tab">
					<div id="tree_div">
						<h:outputText id="tree" escape="false"
							binding="#{categoriesTree.categoryTreeHtml }"></h:outputText>
					</div>
				</div>
				<div id="new_tab">
						<h:outputLabel value="Add new Category:"></h:outputLabel>
						
						<br/>
						<h:inputText id="add_category_name"
							value="#{categoriesTree.addCategoryName}" />
							
						<br/>
						<h:inputTextarea id="add_category_description"
							value="#{categoriesTree.addCategoryDescription }" />
							
						<br/>
						<h:selectOneMenu id="add_category_parent"
							value="#{categoriesTree.addCategoryParent}">
							<f:selectItems value="#{categoriesTree.categoriesList}" />
						</h:selectOneMenu>
						
						<br/>
						<h:commandButton id="add_category" value="Add"
							action="#{categoriesTree.addCategoryAction}">
						</h:commandButton>
				</div>
			</div>
			

			<div id="container">

				<div id="dialog-form" title="Edit Category">
					<table>
						<tr>
							<td>#{msg.name}</td>
							<td><h:inputText id="edit_category_name"
									value="#{categoriesTree.editCategoryName}" disabled="true"></h:inputText></td>
						</tr>
						<tr>
							<td>#{msg.description}</td>
							<td><h:inputTextarea id="edit_category_description"
									value="#{categoriesTree.editCategoryDescription}"></h:inputTextarea>
							</td>
						</tr>

						<tr>
							<td>#{msg.parent}</td>
							<td><h:selectOneMenu id="edit_category_parent"
									value="#{categoriesTree.editCategoryParent}">
									<f:selectItems value="#{categoriesTree.categoriesList}" />
								</h:selectOneMenu></td>
						</tr>
						


					</table>
				</div>
				
			</div>
			<div id="hidden_div" class="hidden_input">
				<h:commandButton id="load_btn" value="Load">
					<f:ajax render="edit_category_description edit_category_parent"
						listener="#{categoriesTree.loadCategoryAction}" />
				</h:commandButton>



				<h:inputText id="edit_name" 
					value="#{categoriesTree.editCategoryName}">
				</h:inputText>
				
				<h:inputText id="edit_description" 
					value="#{categoriesTree.editCategoryDescription}">
				</h:inputText>
				
				<h:inputText id="edit_parent" 
					value="#{categoriesTree.editCategoryParent}">
				</h:inputText>

				<h:commandLink value="#{msg.submit}" id="edit_link"
					action="#{categoriesTree.updateCategoryAction}"></h:commandLink>

				<h:commandLink id="delete_link" value="#{msg.delete}"
					action="#{categoriesTree.deleteCategoryAction}">
				</h:commandLink>
			</div>





			<p></p>
			<!--  -->
			<ui:include src="../footer/footer.xhtml" />

		</body>
	</h:form>
</f:view>
</html>
